| 【vue深入】项目打包之gzip压缩，减少体积，提升响应速度 | 您所在的位置：网站首页 › vue zip压缩 › 【vue深入】项目打包之gzip压缩，减少体积，提升响应速度 |
【vue深入】项目打包之gzip压缩，减少体积，提升响应速度
|
小知识，大挑战！本文正在参与“ 程序员必备小知识 ”创作活动 本文同时参与 「掘力星计划」 ，赢取创作大礼包，挑战创作激励金 前言佛祖保佑， 永无bug。Hello 大家好！我是海的对岸！ 我们项目做得熟练了，Vue也用的熟悉了，我们就会想着扩展。性能优化就是一个不错的方向 这次我们讨论下gzip 这次是测试那边反应，说有个数据网络请求速度有点慢，让我优化一下 解决过程 1. 看看事故现场安装compression-webpack-plugin npm install --save-dev compression-webpack-plugin 或 yarn add compression-webpack-plugin -D 复制代码ps： 这里还有一个小坑，默认安装的compression-webpack-plugin版本是^7.1.2，实际使用的时候报一个错Cannot read property 'tapPromise' of undefined 解决方法就是安装一个低版本的compression-webpack-plugin，经过我的踩雷，5.0.1的版本是可以用的 npm uninstall --save-dev compression-webpack-plugin 或 yarn remove compression-webpack-plugin npm i --save-dev [email protected] 或 yarn add [email protected] -D 复制代码 3. vue.config.js进行配置 // 打包 使用gzip压缩 const CompressionWebpackPlugin = require('compression-webpack-plugin'); // 定义压缩文件类型 const productionGzipExtensions = ['js', 'css']; module.exports = { ... configureWebpack: { plugins: [ new CompressionWebpackPlugin({ filename: '[path].gz[query]', algorithm: 'gzip', test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'), // 匹配文件名 threshold: 10240, // 对超过10K的数据进行压缩 minRatio: 0.8, // 极小比 }), ] }, } 复制代码vue.config.js完整代码： const path = require("path"); const TerserPlugin = require('terser-webpack-plugin'); // 打包 使用gzip压缩 const CompressionWebpackPlugin = require('compression-webpack-plugin'); // 定义压缩文件类型 const productionGzipExtensions = ['js', 'css']; function resolve(dir) { return path.join(__dirname, dir); } module.exports = { // 打包后运行环境目录 publicPath: process.env.NODE_ENV === "production" ? "/GisFrame2/" : "/", lintOnSave: true, // eslint-loader 是否在保存的时候检查 productionSourceMap: false, // 生产环境是否生成 sourceMap 文件 filenameHashing: true, // 文件hash devServer: { // port: 3306, open: true, proxy: { "/api": { // target: http://xxx.xxx.xx.xxx:xxxx/api/", // [开发服务器接口] // target: "http://xxx.xxx.xx.xxx:xxxx/api/", // [测试服务器接口] target: "http://xxx.xxx.xx.xxx:xxxx/api/", // [正式服务器接口] ws: true, changeOrigin: true, pathRewrite: { "^/api": "/" //路径转发代理 } }, "/LocalDemoApi": { target: "http://localhost:8080", //路径指向本地主机地址及端口号 ws: true, changeOrigin: true, pathRewrite: { "^/LocalDemoApi": "/DemoData" //路径转发代理 } }, } }, /* 配置vue-cli3项目，可以说是all in vue.config.js的。 当然，封装、就一定会留个口给用户，去对底层进行自定义操作。 vue.config.js的配置项中，有两个口，configureWebpack和chainWebpack。 configureWebpack: 是调整webpack配置最简单的一种方式，可以新增也可以覆盖cli中的配置。 可以是一个对象：被 webpack-merge 合并到webpack 的设置中去 也可以是一个函数：如果你需要基于环境有条件地配置行为，就可以进行一些逻辑处理，可以直接修改或 新增配置，(该函数会在环境变量被设置之后懒执行)。该方法的第一个参数会收到已经解析好的配置。 在函数内，你可以直接修改配置，或者返回一个将会被合并的对象。 chainWebpack: 这个库提供了一个 webpack 原始配置的上层抽象，使其可以定义具名的 loader 规则 和具名插件，可以通过其提供的一些方法链式调用，在cli-service中就使用了这个插件 */ configureWebpack: { plugins: [ new TerserPlugin({ terserOptions: { ecma: undefined, warnings: false, parse: {}, compress: { drop_console: true, drop_debugger: false, pure_funcs: ['console.log'] // 移除console } }, }), new CompressionWebpackPlugin({ filename: '[path].gz[query]', algorithm: 'gzip', test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'), // 匹配文件名 threshold: 10240, // 对超过10K的数据进行压缩 minRatio: 0.8, // 极小比 }), ], }, chainWebpack: config => { // 配置import 和 require 等路径别名,webpack中是通过 resolve.alias 来实现此功能的,通过set方法添加修改想要的alias 配置 config.resolve.alias .set("@", resolve("src")) .set("spatial", resolve("public/SpatialData")) .set("assets", resolve("src/assets")) .set("components", resolve("src/components")); }, }; 复制代码 4. nginx 服务端开启gzip性能优化项目打个包出来看看 关于nginx性能优化方面，可以讲的东西很多，比如Nginx运行工作进程数量，Nginx运行CPU亲和力，Nginx最大打开文件数，Nginx事件处理模型，开启高效传输模式，连接超时时间，fastcgi 调优，gzip 调优，expires 缓存调优，防盗链，内核参数优化等等 这次我们主要讲的是gzip 调优 核心配置代码如下，我都加了注释，可放心食用： gzip on; #开启或关闭gzip on off gzip_disable "msie6"; #不使用gzip IE6 gzip_min_length 100k; #gzip压缩最小文件大小，超出进行压缩（自行调节） gzip_buffers 4 16k; #buffer 不用修改 gzip_comp_level 8; #压缩级别:1-10，数字越大压缩的越好，时间也越长 gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; # 压缩文件类型 gzip_static on; # nginx 会优先匹配你的 gzip 文件来返回，如果没有就寻找相应资源进行 gzip 压缩再返回 复制代码完整nginx.conf配置代码如下： http { # ===============================================开启nginx服务端gzip性能优化============================= gzip on; #开启或关闭gzip on off gzip_disable "msie6"; #不使用gzip IE6 gzip_min_length 100k; #gzip压缩最小文件大小，超出进行压缩（自行调节） gzip_buffers 4 16k; #buffer 不用修改 gzip_comp_level 8; #压缩级别:1-10，数字越大压缩的越好，时间也越长 gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; # 压缩文件类型 gzip_static on; # nginx 会优先匹配你的 gzip 文件来返回，如果没有就寻找相应资源进行 gzip 压缩再返回 # ===============================================开启nginx服务端gzip性能优化============================= include mime.types; default_type application/octet-stream; #log_format main '$remote_addr - $remote_user [$time_local] "$request" ' # '$status $body_bytes_sent "$http_referer" ' # '"$http_user_agent" "$http_x_forwarded_for"'; #access_log logs/access.log main; sendfile on; #tcp_nopush on; #keepalive_timeout 0; keepalive_timeout 65; #gzip on; server { listen 8081; server_name localhost; #charset koi8-r; #access_log logs/host.access.log main; location / { root html; index index.html index.htm; } ... } 复制代码 5. 看看部署之后的效果都看到这里了，求各位观众大佬们点个赞再走吧，你的赞对我非常重要 |
【本文地址】
公司简介
联系我们